<template>
  <table style="width: 100%">
    <thead>
      <tr class="row">
        <th class="col-4 fac">Stock Code</th>
        <th class="col-4 fac">Task</th>
        <th class="col-4 fac">E-form</th>
      </tr>
    </thead>

    <tbody>
      <tr
        v-for="(item, index) in filterRows"
        :key="index"
        class="cursor-pointer row"
        style="text-align: center"
      >
        <td class="col-4 fac">{{ item.stock_item.stock_code }}</td>
        <td class="col-4 fac">{{ item.name }}</td>

        <td class="col-4 fac">
          <q-btn v-if="item.has_eform"  style="font-size: 12px" 
          @click="goEformWebsite(item.eform_schema_id)"
          >E-form</q-btn>
        </td>
    
      </tr>
    </tbody>
  </table>

  <q-dialog persistent v-model="deleteDialogVisible">
    <q-card>
      <q-card-section class="bg-red">
        <div class="text-h6 text-white">
          Are you sure to delete task {{ editedRow.name }} ?
        </div>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn flat label="No" color="primary" v-close-popup />
        <q-btn flat label="Yes" color="primary" v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { getStockItemTasks } from 'src/services/stockItemtasksService';
import { useQuasar } from 'quasar';
import { StockItemTask } from 'src/services/type';


const editedRow = ref()
const editDialogVisible = ref(false)
const deleteDialogVisible = ref(false)

const $q = useQuasar();

const props = defineProps<{
  stock_id?: number;
  stock_code: string;
}>();


const rows = ref();
const createNewTask = ref(false);
const assignTask = ref(false);
const filterRows = computed(() => {
  return rows.value;
});

async function getStockItemTasksData() {
  const res = await getStockItemTasks(props.stock_code);
  if (res.data) {
    rows.value = [...res.data.data];
  }

}

function openEditDialog(row:StockItemTask) {
  editedRow.value = {...row}
  editDialogVisible.value = true
}

function openDeleteDialog(row:StockItemTask) {
  console.log('delte', row);

  deleteDialogVisible.value = true
}


function closeDialog() {
  createNewTask.value = false;
  assignTask.value = false;
}

function goEformWebsite(eform_schema_id:number){
  const url = `${window.location.protocol}//${window.location.hostname}:8000/eforms/eformPreview/${eform_schema_id}`
  window.open(url)
}



getStockItemTasksData();
</script>
<style scoped>
table {
  border-collapse: collapse;
  table-layout: fixed;
}
table thead tr th {
  border-bottom: 1px solid #d9d9d9;
}

table tbody tr {
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}
td {
  padding: 0.5rem;
}

table thead {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
}
</style>
